<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>图片上传</title>
    <style type="text/css">
    html,body{margin:0;padding:0;width:{$Width}px;height:{$Height}px;}
	.uploadpic{position:relative;}
	#ImgPr{border:0;}
	.puloadpic{position:absolute;width:{$Width}px;height:{$Height}px;}
	.inputfile{position:absolute;top:0px;left:0px;z-index:100;-moz-opacity:0.3;opacity:0.3;filter: alpha(opacity=30);background:#4f99c6;cursor:pointer;}
	#uploadicon{font-size:200px;overflow:hidden;display:block;width:{$Width}px;height:{$Height}px;-moz-opacity:0.0;opacity:0.0;filter: alpha(opacity=0);cursor:pointer;}
	.uploadtext{position:absolute;top:0px;left:0px;z-index:50;color:red;font-weight:bold;text-align:center;width:{$Width}px;height:{$Height}px;line-height:{$Height}px;cursor:pointer;overflow:hidden;}
    .remove{
        position: absolute;
        width: 40px;
        height: 20px;
        top: 0;
        right: 0;
        line-height: 20px;
        font-size: 12px;
        color: #FFF;
        background: #C00;
        cursor: pointer;
        text-align: center;
        z-index: 101;
    }
	</style>
    <!--[if !IE]> -->
		<script type="text/javascript">
			window.jQuery || document.write("<script src='__PUBLIC__/admin/jQuery/jQuery-2.2.0.min.js'>"+"<"+"/script>");
		</script>
		<!-- <![endif]-->
		<!--[if IE]>
		<script type="text/javascript">
		 window.jQuery || document.write("<script src='__PUBLIC__/admin/jQuery/jquery1x.js'>"+"<"+"/script>");
		</script>
		<![endif]-->
		<script type="text/javascript">
			if('ontouchstart' in document.documentElement) document.write("<script src='__PUBLIC__/admin/jQuery/jquery.mobile.custom.js'>"+"<"+"/script>");
		</script>
</head>

<body>
    <form enctype="multipart/form-data" id="PostMe" method="post" name="upform">
        <input type="hidden" value="{$Width}" name="Width">
        <input type="hidden" value="{$Height}" name="Height">
        <input type="hidden" value="{$BackCall}" name="BackCall">
        <div class="uploadpic">
		    <img id="ImgPr" src="
			{if condition="$Img eq ''"}
			__PUBLIC__/admin/images/nopic.gif
			{else /}
			__ROOT__{$Img}
			{/if}
			"  width="{$Width}" height="{$Height}">
            <div class="uploadtext">上传</div>
			<div class="inputfile" title="点击上传图片">
				<input type="file" name="img" id="uploadicon" value="upload"/>
			</div>
            <div class="remove">移除</div>
		</div>
    </form>
    <script type="text/javascript">
        $('#uploadicon').on("change",function(){
           $('#PostMe').submit();
		   //alert('d');
        });

		{if condition="$Img eq '' " }
			var SHU='';
			if( $('#{$BackCall}',parent.document).val() == "" ){
				SHU=$('#{$BackCall}',parent.document).val()	
			}
			else{
				SHU='__ROOT__'+$('#{$BackCall}',parent.document).val()
			}
			$("#ImgPr").attr('src',SHU);
		{else /}
			$('#{$BackCall}',parent.document).val("{$Img}");
		{/if}

        //当没有上传时隐藏移除按钮
        $("#ImgPr").each(function(){
            var src = $(this).attr("src");    //获取图片路径
            if(src == ""){
                $(".remove").hide();
            }
            else{
                $(".uploadtext").text("修改");
            }
        });

        //移除图片
        $(document).ready(function(){
            $(".remove").click(function(){
                $("#ImgPr").remove();   //删除IMG图
                $(".remove").remove();  //删除移除按钮
                var ImgStr="";          //给提交的文本框赋值
                $('#{$BackCall}',parent.document).val(ImgStr);
            });
        });

    </script>
</body>

</html>